<template>
  <div class="content">
    <div class="table">
      <div class="tableHeard">
        <ul>
          <li
            v-for="(item, index) in navList"
            :key="index"
            :class="current === item.code ? 'nav cur' : 'nav'"
            @click="doView(item)"
          >
            {{ item.label }}
          </li>
        </ul>
      </div>
      <div class="heardLeft">
        <el-select
          v-model="searchModel.sex"
          clearable
          @change="searchSex(pageNo, pageSize)"
          @clear="search(pageNo, pageSize)"
          placeholder="请选择"
        >
          <el-option
            v-for="dict in dict.type.sys_user_sex"
            :key="dict.value"
            :label="dict.label"
            :value="Number(dict.value)"
          ></el-option>
        </el-select>
      </div>
      <div class="heardRight">
        <el-input
          placeholder="请输入姓名"
          v-model="searchModel.name"
          clearable
          prefix-icon="el-icon-search"
        >
        </el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search(pageNo, pageSize)"
          >搜索</el-button
        >
      </div>
      <div class="vehicleUserList">
        <el-table
          :data="vehicleUserList"
          style="width: 100%; font-size: 1em"
          height="600"
          :header-cell-style="{
            background: '#0E254F',
            color: 'white',
            height: '70px',
          }"
        >
          <el-table-column prop="idNumber" label="身份证号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <!-- <el-table-column prop="photo" label="照片"> </el-table-column> -->
          <el-table-column prop="photo" label="照片" align="center">
            <template slot-scope="scope">
              <viewer
                ><img
                  style="width: 50px; height: 50px"
                  :src="scope.row.photo" /></viewer></template
          ></el-table-column>
          <el-table-column prop="sex" label="性别">
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.sys_user_sex"
                :value="scope.row.sex"
              />
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>
          <el-table-column prop="phone" label="手机号"> </el-table-column>
          <el-table-column prop="email" label="电子邮箱"> </el-table-column>
          <el-table-column prop="address" label="地址"> </el-table-column>
          <el-table-column prop="carNumber" label="车牌号"> </el-table-column>
        </el-table>
      </div>
      <div class="paging">
        <!-- 分页工具栏 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import vehicleUserApi from "@/api/vehicleUser";
export default {
  dicts: ["sys_user_sex"],
  data() {
    return {
      current: "2",
      navList: [
        { code: "0", label: "商店" },
        { code: "1", label: "重点人员" },
        { code: "2", label: "车辆" },
      ],
      vehicleUserList: [],
      //查询条件
      searchModel: {
        name: "",
        pageNo: 1,
        pageSize: 10,
        sex: "",
      },
      tableHeight: 0, //表格高度
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
    };
  },
  //初始化时调用
  created() {
    //调用查询方法
    this.search();
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 120;
    });
  },
  methods: {
    /**
     * 页面跳转
     */
    doView(item) {
      this.current = item.code;
      this.$emit("fn", this.current);
    },
    /**
     * 当每页数量发生变化时触发该事件
     */
    handleSizeChange(size) {
      this.pageSize = size; //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /**
     * 当页码发生变化时触发该事件
     */
    handleCurrentChange(page) {
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    /**
     * 商家查询
     */
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo; //当前页码
      this.searchModel.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await vehicleUserApi.getVehicleUserListByNameApi(
        this.searchModel
      );
      //执行成功
      if (res.success) {
        //设备列表
        this.vehicleUserList = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    /**
     * 商家查询
     */
    async searchSex(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo; //当前页码
      this.searchModel.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await vehicleUserApi.getVehicleUserListBySexApi(
        this.searchModel
      );
      //执行成功
      if (res.success) {
        //设备列表
        this.vehicleUserList = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 1920px;
  height: 980px;
}
.table {
  width: 1720px;
  height: 980px;
  margin: 0 auto;
  position: relative;
  .tableHeard {
    width: 1720px;
    height: 50px;
    background-color: #0d142b;
    border-radius: 10px 10px 0px 0px;
    position: absolute;
    top: 10px;
    border-bottom: 2px solid #28f1fa;
    .nav {
      color: white;
    }
    .nav:hover {
      color: #00d7e9;
      border: 2px solid #28f1fa;
      font-size: 1.3em;
    }
    .nav.cur {
      color: #00d7e9;
      border: 2px solid #28f1fa;
    }
    li {
      width: 120px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      float: left;
      font-size: 1.1em;
      list-style-type: none;
      border-radius: 10px 10px 0px 0px;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap; /*文本不换行*/
      text-overflow: ellipsis;
    }
  }
  .heardLeft {
    &::v-deep {
      .el-select {
        top: 80px;
        .el-input.el-input--suffix {
          .el-input__inner {
            background: rgba(42, 46, 60, 0.4) !important;
            color: #fff;
            height: 50px;
            font-size: 1.1em;
            border: 2px solid #057dd9;
          }
        }
      }
    }
  }
  .heardRight {
    &::v-deep {
      .el-input {
        position: absolute;
        width: 300px;
        top: 80px;
        right: 120px;
        .el-input__inner {
          background: rgba(42, 46, 60, 0.4) !important;
          color: #fff;
          border: 2px solid #057dd9;
          font-size: 1.1em;
          height: 50px;
        }
      }
      .el-button {
        position: absolute;
        top: 80px;
        right: 0px;
        width: 100px;
        height: 50px;
      }
    }
  }
  .vehicleUserList {
    height: 750px;
    &::v-deep {
      .el-table {
        position: absolute;
        top: 140px;
        background: #0d142b;
        tr {
          background: rgba(13, 20, 43, 1) !important;
          height: 60px;
          color: white;
        }
        tbody tr:hover > td {
          background: rgb(91, 99, 122) !important;
        }
        .el-table__body tr.current-row > td.el-table__cell {
          background: rgb(91, 99, 122) !important;
        }
      }
    }
  }
  .paging {
    position: absolute;
    right: 0px;
  }
}
</style>
